<template>
  <div class="ProductList">
    <a-tabs v-model="active" @change="onTabs">
      <a-tab-pane v-for="item in categoryList" :key="item.id" :tab="item.name"></a-tab-pane>
    </a-tabs>
    <div class="list">
      <div class="left">
        <div class="complex">
          <h4>综合</h4>
          <p>共{{pagination.total_count}}项服务<img src="@/assets/images/icon_prev.png"/><span>{{pagination.page}}</span>/{{pagination.total_count}}<img src="@/assets/images/icon_next.png"/></p>
        </div>
        <a-empty style="margin-top:50px" v-if="productList.length === 0">
          <span slot="description"> 暂无此分类的产品~~ </span>
        </a-empty>
        <div class="ul">
          <div v-for="item in productList" :key="item.id" class="li" @click="$router.push({ name: 'ProductDetail', params: { id: item.id } })">
            <img :src="item.image"/>
            <h4>{{item.name}}</h4>
            <h5><ellipsis :length="32">{{item.describe}}</ellipsis></h5>
            <p v-if="item.price != 0">￥{{item.price}}</p>
            <p v-else>
              <a-button size="small" type="danger">立即咨询</a-button>
            </p>
          </div>
        </div>
        <a-pagination show-quick-jumper v-model="pagination.page" :total="pagination.total_count" />
      </div>
      <div class="right">
        <div class="service">
          <div class="trademark" @click="onSwt">
            <div class="txt">
              <h4>商标服务</h4>
              <h5>品牌建设提升价值</h5>
            </div>
          </div>
          <div class="patent" @click="onSwt">
            <div class="txt">
              <h4>专利服务</h4>
              <h5>抢占市场独占技术</h5>
            </div>
          </div>
          <div class="copyright" @click="onSwt">
            <div class="txt">
              <h4>版权服务</h4>
              <h5>杜绝剽窃维护权益</h5>
            </div>
          </div>
        </div>
<!--        <div class="recommend">-->
<!--          <h4>推荐阅读</h4>-->
<!--          <ul>-->
<!--            <li><a>创业人商标注册注意事项</a></li>-->
<!--            <li><a>商标查询的方法有哪些</a></li>-->
<!--            <li><a>北京商i包注册的流程及...</a></li>-->
<!--            <li><a>商标注册哪家好？</a></li>-->
<!--            <li><a>怎样查询商标已注册？</a></li>-->
<!--            <li><a>注册商标可以选择几个分类</a></li>-->
<!--          </ul>-->
<!--          <h5><a>查看更多</a><img src="@/assets/images/icon_arrows.png"/></h5>-->
<!--        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import Ellipsis from '@/components/Ellipsis/Ellipsis'
import { getProductByCategory, getProductBySecond } from '@/api/product'
import apis from '@/api'

export default {
  components: {
    Ellipsis
  },
  name: 'ProductList',
  data () {
    return {
      categoryList: [],
      productList: [],
      initId: '',
      pagination: {
        page: 1,
        total_count: 0,
        page_size: 9
      },
      active: ''
    }
  },
  created () {
    this.active = this.$route.params.id
    this.getList(this.$route.params.fid, this.$route.params.id)
    // this.getProductList(this.categoryList[0].id)
  },
  methods: {
    getList (fid, id) {
      getProductByCategory(fid).then(res => {
        this.categoryList = res.result.data
        this.initId = id
      }).finally(() => {
        this.getProductList(this.initId)
      })
    },
    getProductList (id) {
      getProductBySecond(id).then(res => {
        this.productList = res.result.data
        this.pagination['total_count'] = res.result.total_count
        this.pagination['page'] = res.result.page
      })
    },
    onTabs (key) {
      this.getProductList(key)
    },
    onSwt () {
      window.open(apis.Swt)
    }
  }
}
</script>

<style scoped>
h4, h5, p, a, li, ul, div, span {margin: 0;padding: 0;font-weight: 500;}
.ProductList{width: 1200px;margin: 0 auto;}
.list{display: flex;justify-content: space-between;}
.list .left{width: 955px;}
.list .left .complex{background-color: #eeeeee;border-top: solid 1px #eeeeee;border-bottom: solid 1px #eeeeee;height: 42px;font-size: 12px;color: #999999;display: flex;align-items: center;justify-content: space-between;padding-right: 15px;}
.list .left .complex h4{font-size: 16px;color: #ffffff;background-color: #f4002b;line-height: 40px;width: 80px;text-align: center;}
.list .left .complex p{display: flex;align-items: center;}
.list .left .complex p span{color: #e52e3a;}
.list .left .complex p img{margin: 0 20px;}
.list .left .ul{display: flex;flex-flow: row wrap;margin-top: 10px;}
.list .left .ul .li{margin-right: 7px;display: flex;align-items: center;flex-direction: column;background-color: #ffffff;width: 233px;height: 333px;margin-bottom: 10px;}
.list .left .ul .li:nth-child(4n+4){margin-right: 0;}
.list .left .ul .li h4{font-size: 16px;color: #333333;margin-top: 5px;}
.list .left .ul .li h5{font-size: 12px;color: #999999;margin: 12px 0;}
.list .left .ul .li p{font-size: 18px;color: #f70306;font-weight: 700;}
.list .left .ul .li img{max-width: 210px;max-height: 210px;}
.list .right{width: 229px;}
.list .right .service{}
.list .right .service>div{position: relative;height: 215px;margin-bottom: 17px;}
.list .right .service .trademark{background: url("../../assets/images/bg_trademark.jpg")no-repeat center;}
.list .right .service .patent{background: url("../../assets/images/bg_patents.jpg")no-repeat center;}
.list .right .service .copyright{background: url("../../assets/images/bg_copyright.jpg")no-repeat center;}
.list .right .service .txt{position: absolute;left: 12px;bottom: 12px;}
.list .right .service h4{font-size: 16px;position: relative;color: #ffffff;padding-bottom: 3px;}
.list .right .service h4:before{position: absolute;content: '';width: 20px;height: 1px;background-color: #ffffff;left: 0;bottom: 0;}
.list .right .service h5{font-size: 14px;color: #ffffff;margin-top: 5px;}
.list .right .recommend{border: solid 1px #efefef;margin-top: 25px;}
.list .right .recommend h4{text-align: center;font-size: 16px;color: #333333;border-bottom: solid 1px #efefef;line-height: 38px;}
.list .right .recommend h5{display: flex;align-items: center;justify-content: flex-end;background-color: #ffffff;padding-bottom: 10px;padding-right: 20px;}
.list .right .recommend h5 a{font-size: 13px;color: #f70306;margin-right: 3px;}
.list .right .recommend h5 a:hover{text-decoration: underline;color: #ff734e;}
.list .right .recommend ul{background-color: #ffffff;padding: 5px 20px;}
.list .right .recommend ul li{line-height: 40px;height: 40px;}
.list .right .recommend ul li a{font-size: 14px;color: #666666;position: relative;display: inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 100%;padding-left: 15px;}
.list .right .recommend ul li a:before{position: absolute;content: '';width: 6px;height: 6px;background-color: #f70306;border-radius: 50%;left: 0;top: 50%;margin-top: -3px;}
.list .right .recommend ul li a:hover{color: #f70306;}
/deep/ .ant-pagination{justify-content: center;align-items: center;display: flex;margin-top: 50px;}
/deep/ .ant-tabs-ink-bar{background-color: #f4002b;}
/deep/ .ant-pagination-item-active a{color: #f4002b;}
/deep/ .ant-pagination-item-active{border-color: #f4002b;}
/deep/ .ant-tabs-nav .ant-tabs-tab-active{color: #f4002b;}
</style>
